<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<script src="../dist/iife/spine-player.js"></script>
	<link rel="stylesheet" href="../css/spine-player.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../../index.css" />
</head>

<body class="flex flex-col justify-center items-center">
	<div id="container" style="max-width:640px; aspect-ratio: 16/9"></div>
	<div id="container-raptor" style="max-width:640px; aspect-ratio: 16/9"></div>
	<div>
		<button id="walk">Walk</button>
		<button id="jump">Jump</button>
		<button id="roar">Roar</button>
		<button id="screenshot">Screenshot</button>
	</div>
	<img id="screenshot-image" src="" style="width: 400px;">
</body>
<script>
	// Creates a new spine player. The debugRender option enables
	// rendering of viewports and padding for debugging purposes.
	new spine.SpinePlayer("container", {
		skeleton: "/assets/spineboy-pro.skel",
		atlas: "/assets/spineboy-pma.atlas",
		animation: "run",
		premultipliedAlpha: true,
		backgroundColor: "#cccccc",
		viewport: {
			debugRender: true,
		},
		debug: {
			meshes: true
		},
		showControls: true,
	});

	// Creates a new spine player with a transparent background,
	// so content from the website shines through. Hides the controls.
	// Instead, the user can control the animation via buttons.
	var jsControlledPlayer = new spine.SpinePlayer("container-raptor", {
		skeleton: "/assets/raptor-pro.json",
		atlas: "/assets/raptor-pma.atlas",
		animation: "walk",
		showControls: false,
		premultipliedAlpha: true,
		backgroundColor: "#00000000",
		alpha: true,
		preserveDrawingBuffer: true,
		defaultMix: 1,
		controlBones: ["root"],
		success: (player) => {
			// Register button click event handlers once the
			// skeleton has been loaded successfully
			document.getElementById("walk").addEventListener("click", event => {
				jsControlledPlayer.setAnimation("walk", false); // set the walk animation to play once
			});

			document.getElementById("jump").addEventListener("click", event => {
				jsControlledPlayer.setAnimation("jump", false); // set the jump animation to play once
			});

			document.getElementById("roar").addEventListener("click", event => {
				jsControlledPlayer.setAnimation("roar", true); // set the jump animation to loop
			});
			document.getElementById("screenshot").addEventListener("click", event => {
				document.getElementById("screenshot-image").src = player.canvas.toDataURL();
			});
		}
	});
</script>
</body>

</html>